@use "styles/Radius.module.scss";
@use "styles/ScreenSizes.module.scss";
@use "styles/Spacings.module.scss";

.from_document_wrapper {
  width: 100%;
  border: 1px dashed var(--border-0);
  border-radius: Radius.$big;
  box-sizing: border-box;
  cursor: pointer;
  height: 100%;
  overflow: scroll;
  transition: border-color 0.3s ease 0.2s, border-width 0.1s ease 0.1s;

  &.dragging {
    border: 3px dashed var(--accent);
    background-color: var(--background-3);
  }

  &:hover {
    border: 3px dashed var(--accent);
  }

  .box_content {
    padding: Spacings.$spacing05;
    display: flex;
    flex-direction: column;
    column-gap: Spacings.$spacing05;
    justify-content: center;
    align-items: center;
    height: 100%;

    .input {
      display: flex;
      gap: Spacings.$spacing02;
      padding: Spacings.$spacing05;

      @media (max-width: ScreenSizes.$small) {
        flex-direction: column;
      }

      .clickable {
        font-weight: bold;
      }
    }
  }
}
